मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
in English

परिचय

बूटस्ट्रॅपसह प्रारंभ करा, प्रतिसाद देणारी, मोबाइल-प्रथम साइट तयार करण्यासाठी जगातील सर्वात लोकप्रिय फ्रेमवर्क, jsDelivr आणि टेम्पलेट स्टार्टर पृष्ठासह.

या पृष्ठावर

जलद सुरुवात

आपल्या प्रोजेक्टमध्ये बूटस्ट्रॅप द्रुतपणे जोडू इच्छित आहात? jsDelivr वापरा, एक विनामूल्य मुक्त स्रोत CDN. पॅकेज व्यवस्थापक वापरत आहात किंवा स्त्रोत फायली डाउनलोड करण्याची आवश्यकता आहे? डाउनलोड पृष्ठाकडे जा .

CSS

आमचे CSS लोड करण्यासाठी इतर सर्व स्टाईलशीटच्या आधी स्टाईलशीट कॉपी-पेस्ट करा <link>.<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

जे.एस

आमच्या अनेक घटकांना कार्य करण्यासाठी JavaScript चा वापर आवश्यक आहे. विशेषतः, त्यांना आमचे स्वतःचे JavaScript प्लगइन आणि पॉपर आवश्यक आहे. खालीलपैकी एक आपल्या <script>पृष्ठांच्या शेवटी, क्लोजिंग </body>टॅगच्या आधी, त्यांना सक्षम करण्यासाठी ठेवा.

मोळी

प्रत्येक बूटस्ट्रॅप JavaScript प्लगइन आणि आमच्या दोन बंडलपैकी एकासह अवलंबित्व समाविष्ट करा. दोन्ही bootstrap.bundle.jsआणि आमच्या टूलटिप्स आणि पॉपओव्हर्ससाठी पॉपरbootstrap.bundle.min.js समाविष्ट करा. बूटस्ट्रॅपमध्ये काय समाविष्ट आहे याबद्दल अधिक माहितीसाठी, कृपया आमचा सामग्री विभाग पहा.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

वेगळे

तुम्ही स्वतंत्र स्क्रिप्ट सोल्यूशनसह जाण्य���चे ठरविल्यास, पॉपर प्रथम येणे आवश्यक आहे (जर तुम्ही टूलटिप्स किंवा पॉपओव्हर्स वापरत असाल तर), आणि नंतर आमचे JavaScript प्लगइन.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

मॉड्यूल्स

तुम्ही वापरत असल्यास <script type="module">, कृपया आमच्या बूटस्ट्रॅपचा मॉड्यूल विभाग म्हणून वापर करा.

घटक

कोणते घटक स्पष्टपणे आमची JavaScript आणि पॉपर आवश्यक आहेत हे उत्सुक आहे? खालील शो घटक दुव्यावर क्लिक करा. जर तुम्हाला सामान्य पृष्ठ संरचनेबद्दल अजिबात खात्री नसेल, तर उदाहरण पृष्ठ टेम्पलेटसाठी वाचत रहा.

JavaScript आवश्यक असलेले घटक दाखवा
  • डिसमिस करण्याच्या सूचना
  • टॉगल स्थिती आणि चेकबॉक्स/रेडिओ कार्यक्षमतेसाठी बटणे
  • सर्व स्लाइड वर्तन, नियंत्रणे आणि निर्देशकांसाठी कॅरोसेल
  • सामग्रीची दृश्यमानता टॉगल करण्यासाठी संकुचित करा
  • डिस्प्ले आणि पोझिशनिंगसाठी ड्रॉपडाउन ( पॉपर देखील आवश्यक आहे )
  • प्रदर्शन, स्थिती आणि स्क्रोल वर्तन यासाठी मॉडेल
  • प्रतिसादात्मक वर्तन अंमलात आणण्‍यासाठी आमचे संकुचित करा प्लगइन वाढवण्‍यासाठी नवबार
  • प्रदर्शित आणि डिसमिस करण्यासाठी टोस्ट
  • डिस्प्ले आणि पोझिशनिंगसाठी टूलटिप आणि पॉपओव्हर्स ( पॉपर देखील आवश्यक आहे )
  • स्क्रोल वर्तन आणि नेव्हिगेशन अद्यतनांसाठी Scrollspy

स्टार्टर टेम्पलेट

तुमची पेज नवीनतम डिझाइन आणि डेव्हलपमेंट मानकांसह सेट केलेली असल्याची खात्री करा. म्हणजे HTML5 doctype वापरणे आणि योग्य प्रतिसादात्मक वर्तनांसाठी व्ह्यूपोर्ट मेटा टॅग समाविष्ट करणे. हे सर्व एकत्र ठेवा आणि आपली पृष्ठे यासारखी दिसली पाहिजेत:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

पुढील चरणांसाठी, तुमच्या साइटची सामग्री आणि घटक मांडणे सुरू करण्यासाठी लेआउट डॉक्स किंवा आमच्या अधिकृत उदाहरणांना भेट द्या.

महत्वाचे जागतिक

बूटस्ट्रॅप मूठभर महत्त्वाच्या जागतिक शैली आणि सेटिंग्जचा वापर करते ज्याचा वापर करताना तुम्हाला याची जाणीव असणे आवश्यक आहे, जे सर्व जवळजवळ केवळ क्रॉस ब्राउझर शैलींच्या सामान्यीकरणासाठी सज्ज आहेत. चला आत जाऊया.

HTML5 doctype

बूटस्ट्रॅपसाठी HTML5 doctype चा वापर आवश्यक आहे. त्याशिवाय, तुम्हाला काही फंकी अपूर्ण स्टाइलिंग दिसेल, परंतु ते समाविष्ट केल्याने कोणतीही लक्षणीय अडचण येऊ नये.

<!doctype html>
<html lang="en">
  ...
</html>

प्रतिसादात्मक मेटा टॅग

बूटस्ट्रॅप प्रथम मोबाइल विकसित केला आहे , एक धोरण ज्यामध्ये आम्ही प्रथम मोबाइल डिव्हाइससाठी कोड ऑप्टिमाइझ करतो आणि नंतर CSS मीडिया क्वेरी वापरून आवश्यकतेनुसार घटक वाढवतो. सर्व उपकरणांसाठी योग्य रेंडरिंग आणि टच झूमिंग सुनिश्चित करण्यासाठी , प्रतिसादात्मक व्ह्यूपोर्ट मेटा टॅग आपल्या <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

स्टार्टर टेम्प्लेटमध्ये तुम्ही याचे उदाहरण पाहू शकता .

बॉक्स-आकार

CSS मध्ये अधिक सोप्या आकारासाठी, आम्ही जागतिक box-sizingमूल्य वरून वर स्विच content-boxकरतो border-box. हे सुनिश्चित paddingकरते की घटकाच्या अंतिम गणना केलेल्या रुंदीवर परिणाम होत नाही, परंतु यामुळे Google नकाशे आणि Google कस्टम शोध इंजिन सारख्या काही तृतीय-पक्ष सॉफ्टवेअरमध्ये समस्या निर्माण होऊ शकतात.

दुर्मिळ प्रसंगी तुम्हाला ते अधिलिखित करणे आवश्यक आहे, खालीलप्रमाणे काहीतरी वापरा:

.selector-for-some-widget {
  box-sizing: content-box;
}

वरील स्निपेटसह, नेस्टेड घटक—त्याद्वारे व्युत्पन्न केलेल्या सामग्रीसह— ::beforeत्यासाठी निर्दिष्ट ::afterकेलेले सर्व वारसा घेतील .box-sizing.selector-for-some-widget

CSS युक्त्या येथे बॉक्स मॉडेल आणि आकारमानाबद्दल अधिक जाणून घ्या .

रीबूट करा

सुधारित क्रॉस-ब्राउझर रेंडरिंगसाठी, आम्ही सामान्य HTML घटकांना किंचित अधिक अभिमत रीसेट प्रदान करताना ब्राउझर आणि डिव्हाइसेसमधील विसंगती सुधारण्यासाठी रीबूट वापरतो.

समुदाय

बूटस्ट्रॅपच्या विकासावर अद्ययावत रहा आणि या उपयुक्त संसाधनांसह समुदायापर्यंत पोहोचा.

  • अधिकृत बूटस्ट्रॅप ब्लॉग वाचा आणि सदस्यता घ्या .
  • IRC मधील सहकारी बूटस्ट्रॅपर्सशी गप्पा मारा. irc.libera.chatसर्व्हरवर, चॅनेलमध्ये #bootstrap.
  • bootstrap-5स्टॅक ओव्हरफ्लो (टॅग केलेले ) येथे अंमलबजावणी मदत मिळू शकते .
  • bootstrapविकासकांनी पॅकेजेसवर कीवर्ड वापरावे जे बूटस्ट्रॅपच्या कार्यक्षमतेत सुधारणा करतात किंवा जोडतात जेव्हा जास्तीत जास्त शोधण्यायोग्यतेसाठी npm किंवा तत्सम वितरण यंत्रणेद्वारे वितरण करतात.

नवीनतम गप्पाटप्पा आणि अप्रतिम संगीत व्हिडिओंसाठी तुम्ही Twitter वर @getbootstrap ला देखील फॉलो करू शकता .